<template>
  <div class="app">
    <nav class="right-menu" :style="{ height: `${screenHeight}px` }">
      <router-link :class="['menu-item', Menu_pos == 0 ? 'xzset' : '']" to="/kjzj" @click="menu(0)">开机自检</router-link>
      <router-link :class="['menu-item', Menu_pos == 1 ? 'xzset' : '']" to="/aqlj" @click="menu(1)">安全连接</router-link>
      <router-link :class="['menu-item', Menu_pos == 2 ? 'xzset' : '']" to="/mbss"
        @click="menu(2)">目标搜索与方位引导（粗跟踪）</router-link>
      <router-link :class="['menu-item', Menu_pos == 6 ? 'xzset' : '']" to="/pzj" @click="menu(6)">偏转镜</router-link>

      <router-link :class="['menu-item', Menu_pos == 3 ? 'xzset' : '']" to="/mbbh"
        @click="menu(3)">目标捕获与识别</router-link>
      <router-link :class="['menu-item', Menu_pos == 4 ? 'xzset' : '']" to="/mbgz"
        @click="menu(4)">目标跟踪与瞄准</router-link>
      <router-link :class="['menu-item', Menu_pos == 5 ? 'xzset' : '']" to="/jgfs"
        @click="menu(5)">激光发射与控制</router-link>
    </nav>
    <router-view v-bind:class="class" @message="handleMessage"> </router-view>
  </div>
</template>

<script>
import Top from "../top/top.vue";
import AppBar from "../top/AppBar.vue";

export default {
  name: "TopMenu",
  components: {
    Top,
    AppBar,
  },

  data() {
    return {
      screenHeightPx: this.screenHeight + "px",
      screenHeight: 0,
      pageTitle: "1111",
      Menu_pos: 0,
      class: "kkhjh",
    };
  },

  mounted() {
    this.screenHeight = window.innerHeight - 60 - 16;
    console.log("mountedscreenHeight=" + this.screenHeight);
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },

  created() {
    // this.addCloseMenu();
    console.log("home");
    // this.$router.push("/home");
  },
  methods: {
    handleMessage(message) {
      console.log(message); // 当子组件发射事件时，这里会打印出消息
      this.Menu_pos = message;
    },
    handleResize() {
      this.screenHeight = window.innerHeight - 100;
      console.log("handleResizescreenHeight=" + this.screenHeight);
    },
    menu(pos) {
      this.Menu_pos = pos;

      console.log("pos=" + this.Menu_pos);
      if (this.Menu_pos == 0) {
        // this.Component = "/hometest"
        // this.$router.push("/hometest");
      } else if (this.Menu_pos == 1) {
        // this.Component = "/hometest/pzgl"
        // this.$router.push("/pzgl");
      } else if (this.Menu_pos == 2) {
        // this.Component = "/hometest/xxgl"
        // this.$router.push("/xxgl");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.app {
  display: flex;
  flex-direction: row-reverse;
  height: 100%;

  .right-menu {
    width: 140px;
    background-color: #929396;
    color: white;

    .menu-item {
      display: flex;
      height: 50px;
      border-bottom: 1px solid rgba(238, 238, 238, 0.06);
      width: 100%;
      align-items: center;
      justify-content: center;

      &.xzset {
        background-color: rgb(32, 68, 185);
      }
    }
  }

  .right-menu a {
    color: white;
    text-decoration: none;
    display: inline-block;
  }

  .right-menu a.active {
    font-weight: bold;
    background-color: rgb(38, 77, 204);
  }
}
</style>
